import React, {Fragment} from 'react';
import "./index.less"
import {Col, ConfigProvider, Divider, Row, Timeline} from "antd";
import Judge from "@/pages/WorkFlowDesigner/Node/Judge";


/**
 * 分支节点
 * 1.重难点,如何绘制分支线
 * 实现方法1:
 *  1. 创建一个父div 采用弹性盒子模型
 *  2. 创建N个子div平均分配父div
 *  3. 利用伪选择器before,在子div中央绘制一条竖线作为分支路径指示
 *  4. 显示父div上下边框
 *  4. 创建四个div将上下左右多余的div 横线遮盖住
 *  实现方法2
 *  0. 用antd的栅格暂时无法实现,可能是我参数设置考虑欠缺.
 *     1 antd 的栅格配合分割线[Divider]横向, 时间线[TimeLine]纵向 也可以实现不太灵活的解决方案,且该方案目前有比较大的局限性,后续还需要继续优化
 *     2. 采用Divider 无非就行希望利用分割线中的 div(className="ant-divider-horizontal")元素中css绘制的实线
 *     3. 同理采用TimeLine也是基于类似的解决方案,后续可以直接将对应div元素的布局设置抽取出来,以采用更加直观的方法
 *     但是很遗憾,该方法封底比较麻烦
 *
 *  实现方法3:
 *      利用flex布局轻松实现,以及将将div边框填满Context区域,就是一条线
 *
 */


export default React.memo(() => {

    return (
        <Fragment>
            <div>
                <Row justify="center" align="top" wrap={false}>
                    <Col flex="auto" span={4}>
                        <ConfigProvider
                            theme={{
                                token: {
                                    margin: 0,
                                    padding: 0,
                                },
                                components: {
                                    Timeline: {
                                        /* here is your component tokens */
                                        itemPaddingBottom: 100,
                                        dotBg: "rgba(255, 255, 255, 0)"
                                    },
                                },
                            }}
                        >
                            <Timeline
                                style={{insetInline: 0}}
                                mode="right"
                                pendingDot={<Fragment/>}
                                items={[
                                    {dot: <Fragment/>,},
                                    {dot: <Judge/>}
                                ]}
                            />
                        </ConfigProvider>

                    </Col>
                    <Col flex="auto" span={10}>

                        <Divider style={{backgroundColor: "rgba(255, 255,255, 0)"}}></Divider>

                    </Col>
                    <Col flex="auto" span={4}>
                        <ConfigProvider
                            theme={{
                                components: {
                                    Timeline: {
                                        /* here is your component tokens */
                                        itemPaddingBottom: 100,
                                        dotBg: "rgba(255, 255, 255, 0)"

                                    },
                                },
                            }}
                        >
                            <Timeline
                                items={[
                                    {dot: <Fragment/>},
                                    {dot: <Judge/>},
                                ]}
                            />
                        </ConfigProvider>
                    </Col>
                </Row>
            </div>

        </Fragment>
    )
})
